<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./css/basep2.css">
    <link rel="stylesheet" href="../web_p2/_reset.css">
    <link rel="stylesheet" href="./css/common2.css">
    <link rel="stylesheet" href="./font/iconfont.css">

</head>
<body>
    <div class="mobile_app">
        <!-- 头部 -->
        <header>
            <!-- 头部栏 -->
            <div class="column">
                <!-- 返回按钮 -->
                <div class="back_btn">
                    <button> <a href="">Back</a> </button>
                </div>
                <!-- 分类 -->
                <div class="clsasify_title">
                    <span>分类</span>
                </div>
                <!-- 切换城市 -->
                <div class="select_city">
                    <div class="select_city">
                        <select name="" id="">
                            <option value="">广州市</option>
                            <option value="">深圳市</option>
                        </select>
                </div>
            </div>
        </div>
        </header>
        <!-- 页面主体 -->
        <main>
            <!-- 栏目导航 -->
         <div class="column_bar">
             <a href="#"><img src="./img/page2/图层1.png" alt=""><p>美食</p></a>
             <a href="#"><img src="./img/page2/图层3.png" alt=""><p>电影</p></a>
             <a href="#"><img src="./img/page2/图层4.png" alt=""><p>运动</p></a>
             <a href="#"><img src="./img/page2/图层5.png" alt=""><p>唱歌</p></a>
         </div>
         <!-- 换栏目按钮 -->
         <div class="wrap_btn_bar">
             <!-- 换栏目按钮容器 -->
            <div class="wrap_container">
                <!-- 换栏按钮 -->
                <button class="wrap_btn"><a href="#"></a></button>
                <button class="wrap_btn"><a href="#"></a></button>
                <button class="wrap_btn"><a href="#"></a></button>
               <button class="wrap_btn"><a href="#"></a></button>
            </div>
           
         </div>
          <!-- 美食类栏目 -->
          <div class="food_column">
              <div class="column_container">
                  <!-- 顶部标题 -->
                <div class="column_title">
                    <!-- 顶部标题-左边 -->
                    <div class="column_title_left"><img src="./img/page2/图层9.png" alt=""><p>美食类</p></div>
                    <!-- 顶部标题-右边 --> 
                    <div class="column_title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
                 </div>
                 <!-- 选择栏 -->
                 <a href="" class="pic"><img src="./img/page2/图层10.png" alt=""></a>
                 <a href="" class="pic"><img src="./img/page2/图层11.png" alt=""></a>
                 <a href="" class="pic"><img src="./img/page2/图层12.png" alt=""></a>
                 <a href="" class="pic"><img src="./img/page2/图层13.png" alt=""></a>
              </div>
        </div>
        <!-- 体育类栏目 -->
        <div class="sport_column">
            <div class="column_container">
              <div class="column_title">
                  <div class="column_title_left"><img src="./img/page2/图层7.png" alt=""><p>体育类</p></div> 
                  <div class="column_title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
               </div>
               <a href="" class="pic"><img src="./img/page2/图层14.png" alt=""></a>
               <a href="" class="pic"><img src="./img/page2/图层15.png" alt=""></a>
               <a href="" class="pic"><img src="./img/page2/图层16.png" alt=""></a>
               <a href="" class="pic"><img src="./img/page2/图层17.png" alt=""></a>
            </div>
      </div>
      <!-- 电影类栏目 -->
      <div class="movie_column">
        <div class="column_container">
              <!-- 顶部标题 -->
          <div class="column_title">
               <!-- 顶部标题-左边 -->
              <div class="column_title_left"><img src="./img/page2/图层8.png" alt=""><p>电影类</p></div> 
                 <!-- 顶部标题-右边 --> 
              <div class="column_title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
           </div>
             <!-- 选择栏 -->
           <a href="" class="pic"><img src="./img/page2/图层18.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层19.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层18.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层19.png" alt=""></a>
        </div>
  </div>
    <!-- 唱歌类栏目 -->
    <div class="songs_column">
        <div class="column_container">
              <!-- 顶部标题 -->
          <div class="column_title">
               <!-- 顶部标题-左边 -->
              <div class="column_title_left"><img src="./img/page2/图层8.png" alt=""><p>唱歌类</p></div> 
                 <!-- 顶部标题-右边 --> 
              <div class="column_title_right"><a href=""><p>更多</p><i class="iconfont">&#xe638;</i></a></div>
           </div>
             <!-- 选择栏 -->
           <a href="" class="pic"><img src="./img/page2/图层18.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层19.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层18.png" alt=""></a>
           <a href="" class="pic"><img src="./img/page2/图层19.png" alt=""></a>
        </div>
  </div>
        </main>
        <!-- 底部 -->
        <footer>
            <!-- 底部导航 -->
          <a href="./index.html"><i class="iconfont bottom_pic">&#xe634;</i><p>首页</p></a>
          <a href="#"><i class="iconfont bottom_pic">&#xeac4;</i><p>分类</p></a>
          <a href="./find.html"><i class="iconfont bottom_pic">&#xe8af;</i><p>发现</p></a>
          <a href="./mine.html"><i class="iconfont bottom_pic">&#xe8a0;</i><p>我的</p></a>
        </footer>
    </div>
</body>
</html>